<template>
  <div class="note-card bili-card">
    <div class="pic-box">
      <div class="pic">
        <a :href="url" target="_blank">
        <img referrerPolicy="no-referrer" :src="info.pic" />
        </a>
      </div>
    </div>
    <div class="info-box">
      <a class="title" :href="url" target="_blank">
        {{info.title}}
        <ri :title="info.title" i="elink"></ri>
      </a>
      <div class="up">{{info.owner? info.owner.name : info.owner}}</div>
      <div class="count">
        {{stats.view}} 播放；
        {{stats.danmaku}} 弹幕
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["note"],
  computed: {
    url() {
      return this.note.link;
    },
    stats() {
      return this.info.stat ? this.info.stat: {}
    }
  },
  created() {
    let bv = this.note.link || this.note.content;
    // 如果是http形式，需要获取最后一个/之后的内容
    if (bv.startsWith("http")) {
      bv = new URL(bv)
      bv = bv.pathname.split("/")
      bv = bv[bv.length - 1]
    }
    this.$axios.get("/bili/x/web-interface/view?bvid="+bv).then(res => {
      if (res.data && res.data.data) {
        this.info = res.data.data;
      }
    })
  },
  data() {
    return {
      info: {}
    };
  },
};
</script>

<style lang="stylus">
.bili-card
  width 100%
  display flex

  .pic-box
    position relative
    width 256px
    height 160px
    border-radius 4px

    .pic
      overflow hidden
      border-radius 4px
      width 256px
      height 160px

      img
        max-width 256px
        max-height 160px

  .info-box
    width 400px
    height 200px
    margin-left 10px

    .title
      font-size 1.2em
      color #333
      height 102px
      display -webkit-box
      margin-bottom 10px

    .up,.count
      color #999
      font-size 0.8em
      display inline-box
      height 16px
      
    .up
      margin-bottom 6px
      overflow hidden
      text-overflow ellipsis 



</style>